<template>
  <view class="container">
    <button @click="downloadImage">下载图片</button>
    <image v-if="imgPath" :src="imgPath" mode="widthFix" class="img"></image>
    <view v-if="progress > 0 && progress < 100">进度：{{ progress }}%</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgPath: '',
      progress: 0,
      imgUrl: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg'
    }
  },
  methods: {
    downloadImage() {
      this.progress = 0;
      this.imgPath = '';
      // 使用uni.downloadFile()接口
     uni.downloadFile({
        url: this.imgUrl,
        success: res => {
          if (res.statusCode === 200) {
            this.imgPath = res.tempFilePath;
          }
        }
      });
      onProgressUpdate(res => {
        this.progress = res.progress;
        console.log(`进度：${res.progress}%，已下载：${res.totalBytesWritten}B`);
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
}
button {
  background: #007aff;
  color: #fff;
  padding: 15rpx;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}
.img {
  width: 100%;
  margin-top: 10rpx;
}
</style>